<template>
  <el-dialog v-model="show" title="修改属性" width="600px" @close="closeModal">
    <el-form :model="form" label-width="80px">
      <el-form-item label="报价名称">
        <el-input
          v-model="form.AttrName"
          placeholder="请输入报价名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="计算公式" prop=AttrValue :rules="[{trigger:'change', validator: checkFormula}]">
        <el-input
          type="textarea"
          v-model="form.AttrValue"
          placeholder="请输入计算公式"
          :rows="4"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.AttrRemark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否默认">
        <el-radio-group v-model="form.IsDefault">
          <el-radio :value="true">是</el-radio>
          <el-radio :value="false">否</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="排序">
        <el-input v-model="form.SortIndex" type="number"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { reactive, toRef, toRefs, watch } from "vue";
import { errMsg } from "@/utils/errorMsg";
import { validAttrsName, validCalcExpression } from "../../../../../utils/validate";

defineOptions({
  name: "DefaultEditModal",
});
const props = defineProps({
  open: {
    type: Boolean,
    required: true,
  },
  isUpdate: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["closeModal", "reload"]);

const state = reactive({
  form: {
    // 报价名称
    AttrName: "",
    // 计算公式
    AttrValue: ``,
    AttrRemark: ``,
    SortIndex: "",
    IsDefault: 1,
  },
});

const { form } = toRefs(state);
watch(
  () => props.open,
  (val) => {
    show.value = val;
    form.value = Object.assign({}, props.data);
    if (!props.isUpdate) {
      form.value = {
        AttrName: "",
        // 计算公式
        AttrValue: ``,
        AttrRemark: ``,
        SortIndex: "",
        IsDefault: 1,
      };
    }
  }
);
const show = ref(false);

function closeModal() {
  show.value = false;
  emits("closeModal");
}

function handleConfirm() {
  try {
    // 接口请求
    if (props.isUpdate) {
      emits("reload", form.value, true);
    } else {
      emits("reload", form.value, false);
    }
    // emits('reload', form.value)
  } catch (error) {
    console.error("未知错误", error);
    // 请求失败处理
    ElMessage.error("修改失败：" + errMsg(error));
  }
  closeModal();
}
function checkFormula(rule, value, callback) {
  if (!value) return;
  let [attrValid, wrongAttr] = validAttrsName(value);
  if (!attrValid) {
    callback(new Error(`未找到属性“${wrongAttr}”`));
  } else if (!value) {
    callback(new Error("计算公式不能为空"));
  } else if (!validCalcExpression(value)) {
    callback(new Error("公式格式有误"));
  }
  callback();
}
</script>
<style lang="scss">
</style>